<template>
    <div class="filter-condition">
        <span class="label">{{filter.name}}:</span>
        <el-select class="value" v-model="filter.value" size="mini" @change="conditionChange">
            <el-option :value="null" label="(无)"></el-option>
            <el-option v-for="index in colIndexes[filter.name]" :key="index" :label="index" :value="index"></el-option>
        </el-select>
        <el-button class="close" circle icon="el-icon-close" @click="removeFilter" size="mini"
                   type="danger"></el-button>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';

    export default {
        name: "FilterCondition",
        props: {
            filter: Object,
        },
        computed: {
            colIndexes() {
                return this.$store.state.table2.colIndexes;
            },
            ...mapGetters(['getCascadeParent']),
        },
        // data() {
        //     return {
        //         filter: {},
        //     };
        // },
        methods: {
            removeFilter() {
                this.$store.dispatch('removeFilter', this.filter.name).then(() => {
                    this.conditionChange();
                });
            },
            conditionChange() {
                this.$store.commit('doFilterData');
            }
        },

    }
</script>

<style scoped>
    .filter-condition {

    }

    .filter-condition .label {
        font-size: 14px;
        color: #333333;
    }

    .filter-condition .value {
        margin: 0 10px;
    }

    .filter-condition .close {
    }
</style>